<template>
  <div class="outDiv">
    <scroller lock-x>
      <div>
        <Header aa="../teachers/teaindex" contentTitle="个人中心"></Header>
        <div class="mainDiv">
          <ul class="menu_list">
            <li class="menu_item">
              <div class="left">头像</div>
              <div class="right"><img class="avatar" src="~/static/images/default_avatar.png"></div>
            </li>
            <li class="menu_item">
              <div class="left">昵称</div>
              <div class="right">{{ userData.name }}</div>
            </li>
            <li class="menu_item">
              <div class="left">所属院校</div>
              <div class="right">{{ users.school }}</div>
            </li>
            <li class="menu_item" @click="wechatDialogShow = true">
              <div class="left">微信</div>
              <div class="right">
                <span>点击绑定</span>
                <img src="~/static/icon/icon_arrows_more_32.png">
              </div>
            </li>
            <li class="menu_item" @click="commonJs.gosto('/userCenter/changePwd')">
              <div class="left">修改密码</div>
              <div class="right">
                <span>点击修改</span>
                <img src="~/static/icon/icon_arrows_more_32.png">
              </div>
            </li>
          </ul>
          <div v-transfer-dom>
            <popup v-model="wechatDialogShow" position="bottom" width="100%" height="3.19rem">
              <div class="popblock">
                <div class="tip">
                  <p>该账号即将与您的微信账号产生绑定</p>
                  <p>绑定后再次访问将自动登录系统</p>
                </div>
                <div class="btnGroup">
                  <div class="cancel" @click='cancel'>取消</div>
                  <div class="confirm" @click="confirm">确定</div>
                </div>
              </div>
            </popup>
          </div>  
        </div>

        <div style="width: 100%; height: 1.5rem"></div>
      </div>
    </scroller>
    
  </div>  
</template>

<script>
import { TransferDom, Popup } from 'vux'
import Header from '~/components/Header_act'
import axios2 from "~/plugins/axios2";
import ls from "store2";
export default {
  components: {
    Header,
    Popup
  },
  directives: {
    TransferDom
  },
  data() {
    return {
      users: {},
      userData: ls.get('userData'),
      wechatDialogShow: false
    }
  },
  mounted() {
    this.getUsersInfo();
  },
  methods: {
    // 获取用户信息
    getUsersInfo() {
      this.$vux.loading.show({ text: "正在加载" });
      axios2.post("/thirdParty/user/getTeacherUserInfoById", {
        uid: this.userData.userVoId
      }, true).then(res => {
        this.users = res.data;
        this.$vux.loading.hide();
      })
    },
    // 微信绑定 -- 点击‘取消’按钮
    cancel() {
      this.wechatDialogShow = false;
    },
    // 微信绑定 -- 点击‘确认’按钮 ----> 如已绑定则解绑，如未绑定则绑定
    confirm() {
      this.$vux.toast.text('该功能暂时未开启，敬请期待~');
      this.wechatDialogShow = false;
    }
  },

}
</script>

<style lang="less" scoped>
	/deep/.vux-popup-dialog {
    background: #fff;
    border-top-right-radius: 0.14rem;
    border-top-left-radius: 0.14rem;
  }

  .popblock {
    
    .tip {
      width: 100%;
      height: 2.21rem;
      padding: 0.66rem 0.32rem 0.65rem;
      text-align: center;

      p {
        color: #222;
        font-size: 0.3rem;
        line-height: 0.45rem;
      }

    }

    .btnGroup {
      font-size: 0.36rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .cancel, .confirm {
        text-align: center;
        width: 3.75rem;
        height: 0.98rem;
        line-height: 0.98rem;
        border-top: 1px solid #ddd;
      }

      .cancel {
        color: #222;
        border-right: 1px solid #ddd;
      }

      .confirm {
        color: #108EE9;
        border-left: 1px solid #ddd;
      }

    }

  }

  .outDiv {
    width: 100%;
    height: 100vh;
    background: #fff;

    .mainDiv {
      padding: 0 0.32rem;

      .menu_list {
        padding-left: 0;
        list-style: none;
        margin-top: 0.24rem;

        .menu_item {
          width: 100%;
          height: 1.12rem;
          box-sizing: border-box;
          border-bottom: 1px solid #E5E8ED;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            color: #222;
            font-size: 0.28rem;
            line-height: 0.4rem;
            letter-spacing: 1px;
          }

          .right {
            color: #222;
            font-size: 0.26rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span { margin-right: 0.08rem; }

            img {
              width: 0.4rem;
              height: 0.4rem;
            }

            img.avatar {
              width: 0.8rem;
              height: 0.8rem;
            }

          }
        }

      }

    }

   

  }    
</style>
